<!-- wyf 2022-5-11 -->
<template>
  <z-form-item
    v-if="basicForm?.isShow == '1'"
    :label-col="{ style: { width: '120px', paddingRight: '6px' } }"
    :required="formForm?.required === '1'"
    :prop="basicForm.field"
    :label="formForm?.headText && formForm?.personal == '1' ? formForm?.headText : basicForm?.titleName || '下拉框'"
    class="z-form-item"
  >
    <z-select
      v-model:value="model[basicForm.field]"
      :value="formForm.value"
      :disabled="formForm?.disabled === '1'"
      :placeholder="formForm?.placeHolder"
      :mode="formForm?.isMulCho == '1' ? 'multiple' : 'combobox'"
      :max="formForm.max && formForm.max > 0 ? formForm.max : ''"
      :options="addOption"
      show-search
      :filter-option="filterOption"
      @change="selectChange"
    />
  </z-form-item>
</template>
<script>
import { computed, defineComponent, toRef, ref, onMounted, watch } from 'vue'
import formInfo from '../../../api/renderForm/index.js'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'SelectItem',
  props: {
    formProperty: {
      type: Object,
      default: undefined
    },
    basicProperty: {
      type: Object,
      default: undefined
    },
    formModel: {
      type: Object,
      default: undefined
    },
    formList: {
      type: Array,
      default: undefined
    }
  },
  setup(props) {
    const store = useStore()

    const basicForm = toRef(props, 'basicProperty')
    const formForm = toRef(props, 'formProperty')
    const formList = toRef(props, 'formList')
    const model = computed(() => props.formModel ? props.formModel : {})

    // 下拉框数据数组
    let addOption = ref([])

    // 获取下拉框数据
    const getDataArr = () => {
      if (formForm.value.optionType === '1') {
        addOption.value = formForm.value.addOption
      } else {
        addOption.value = []
        if (formForm.value.url) {
          formInfo.getRemoteData(formForm.value.url).then(res => {
            if (res.code === 1) {
              addOption.value = res.data.map(item => {
                return {
                  label: item[formForm.value.label],
                  value: item[formForm.value.remoteValue],
                  disabled: false,
                  ...item
                }
              })
            } else {
              addOption.value = []
            }
          })
        }
      }
    }

    // 远端数据 or 静态数据
    watch(() => formForm.value.optionType, (count, prevCount) => {
      getDataArr()
    })

    onMounted(() => {
      getDataArr()
    })

    // 监听当前选择组件对象数据  赋值操作
    watch(
      () => store.getters.currentVal,
      (val) => {
        let arr = store.getters.relaFieldsArr
        arr.forEach((item) => {
          if (item.assoField === basicForm.value.field) {
            model.value[basicForm.value.field] = '' || []
            formInfo.getRemoteData(item.url + store.getters.currentVal.map(i => {
              return i[item.linkField]
            })).then((res) => {
              if (res.code === 1) {
                addOption.value = res.data.map(item1 => {
                  return {
                    label: item1[item['showField']],
                    value: item1[item['replaceField']],
                    disabled: false,
                    ...item1
                  }
                })
              } else {
                addOption.value = []
                model.value[basicForm.value.field] = '' || []
              }
            }).catch(() => {
              addOption.value = []
              model.value[basicForm.value.field] = '' || []
            })
          }
        })
      }
    )

    // 下拉框切换事件
    const selectChange = (val, option) => {
      // 单选or多选
      if (formForm.value.isMulCho === '0') {
        store.commit('formMake/UPDATE_CURRENTVAL', [option])
      } else {
        store.commit('formMake/UPDATE_CURRENTVAL', option)
      }
      store.commit('formMake/UPDATE_CURRENTFIELD', basicForm.value.field)
      formList.value.forEach(item => {
        if (basicForm.value.field === item.basicProperty.field) {
          store.commit('formMake/UPDATE_ISCHANGEVAL', true)
          store.commit('formMake/UPDATE_CURRENTOBJ', item)
          store.commit('formMake/UPDATE_RELAFIELDSARR', item.formProperty.relaFields)
        }
      })
    }

    // 搜索功能
    const filterOption = (input, option) => {
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }

    return {
      basicForm,
      formForm,
      model,
      addOption,
      selectChange,
      filterOption
    }
  }
})
</script>
<style lang="less" scoped>
.z-form-item{
  flex: 1;
}
</style>
